<template>
  <div class="test-page">
    <!-- 展示新的AI介绍文案 -->
    <AIIntroSection version="professional" theme="gradient" />
    
    <!-- 说明区域 -->
    <div class="explanation-section">
      <el-card class="explanation-card">
        <template #header>
          <h2>✅ 文案已更新完成</h2>
        </template>
        
        <div class="content">
          <div class="text-comparison">
            <div class="text-line">
              <span class="line-label">第一行（大字体）：</span>
              <span class="main-text">我是MatCreate AI，很高兴见到你！</span>
            </div>
            
            <div class="text-line">
              <span class="line-label">第二行（小字体）：</span>
              <span class="sub-text">我可以帮你设计材料、合成材料、解答问题，请把你的任务交给我吧</span>
            </div>
          </div>
          
          <div class="features">
            <h3>🎯 设计特点</h3>
            <ul>
              <li>✅ <strong>第一行字体大小保持不变</strong>：2.2rem（桌面端）/ 1.6rem（移动端）</li>
              <li>✅ <strong>第二行字体比第一行小</strong>：1.1rem（桌面端）/ 1rem（移动端）</li>
              <li>✅ <strong>友好的AI自我介绍</strong>：突出MatCreate AI的身份</li>
              <li>✅ <strong>明确的服务能力</strong>：设计材料、合成材料、解答问题</li>
              <li>✅ <strong>主动的服务态度</strong>：请把你的任务交给我吧</li>
            </ul>
          </div>
          
          <div class="usage-info">
            <h3>📝 使用方法</h3>
            <div class="code-block">
              <pre><code>&lt;!-- 在任何Vue组件中使用 --&gt;
&lt;AIIntroSection version="professional" theme="gradient" /&gt;

&lt;!-- 引入组件 --&gt;
import AIIntroSection from '@/components/AIIntroSection.vue'</code></pre>
            </div>
          </div>
          
          <div class="next-steps">
            <h3>🚀 下一步</h3>
            <p>现在您可以把更多任务交给我！我已经准备好帮您：</p>
            <div class="task-buttons">
              <el-button type="primary" @click="startMaterialDesign">
                🔬 开始材料设计
              </el-button>
              <el-button type="success" @click="startMaterialSynthesis">
                ⚗️ 开始材料合成
              </el-button>
              <el-button type="info" @click="startQuestionAnswer">
                💬 开始问题解答
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElCard, ElButton } from 'element-plus'
import AIIntroSection from '../components/AIIntroSection.vue'

// 任务处理函数
const startMaterialDesign = () => {
  console.log('开始材料设计任务')
  // 这里可以跳转到材料设计功能
}

const startMaterialSynthesis = () => {
  console.log('开始材料合成任务')
  // 这里可以跳转到材料合成功能
}

const startQuestionAnswer = () => {
  console.log('开始问题解答任务')
  // 这里可以跳转到问答功能
}
</script>

<style lang="scss" scoped>
.test-page {
  min-height: 100vh;
  background: #f5f5f5;
}

.explanation-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

.explanation-card {
  .content {
    .text-comparison {
      background: #f8f9fa;
      padding: 1.5rem;
      border-radius: 8px;
      margin-bottom: 2rem;
      border-left: 4px solid #007CF0;
      
      .text-line {
        margin-bottom: 1rem;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .line-label {
          font-weight: 600;
          color: #2c3e50;
          display: inline-block;
          min-width: 140px;
        }
        
        .main-text {
          font-size: 1.3rem;
          font-weight: 600;
          color: #007CF0;
          background: linear-gradient(45deg, #007CF0, #00DFD8);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        
        .sub-text {
          font-size: 1rem;
          color: #666;
          font-weight: 400;
        }
      }
    }
    
    .features {
      margin-bottom: 2rem;
      
      h3 {
        color: #2c3e50;
        margin-bottom: 1rem;
      }
      
      ul {
        li {
          margin-bottom: 0.8rem;
          line-height: 1.5;
          
          strong {
            color: #007CF0;
          }
        }
      }
    }
    
    .usage-info {
      margin-bottom: 2rem;
      
      h3 {
        color: #2c3e50;
        margin-bottom: 1rem;
      }
      
      .code-block {
        background: #2c3e50;
        border-radius: 8px;
        padding: 1rem;
        
        pre {
          margin: 0;
          
          code {
            color: #ecf0f1;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            line-height: 1.5;
          }
        }
      }
    }
    
    .next-steps {
      h3 {
        color: #2c3e50;
        margin-bottom: 1rem;
      }
      
      p {
        margin-bottom: 1.5rem;
        color: #666;
        font-size: 1.1rem;
      }
      
      .task-buttons {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        justify-content: center;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .explanation-section {
    padding: 1rem;
  }
  
  .text-comparison {
    .text-line {
      .line-label {
        display: block;
        margin-bottom: 0.5rem;
        min-width: auto;
      }
      
      .main-text {
        font-size: 1.1rem;
      }
      
      .sub-text {
        font-size: 0.9rem;
      }
    }
  }
  
  .task-buttons {
    flex-direction: column;
    align-items: center;
    
    .el-button {
      width: 200px;
    }
  }
}
</style>
